<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <script src="../js/header.js"></script>
    <style>
        .title_name{
            font-family: SourceHanSansCN-Medium;
            font-size: 22px;
            color: #323232;
        }
        ul,li{
            list-style-type: disc;
            list-style-position: inside;
        }
        .content_ul li{
            padding: 22px 0 22px 22px;
            border-top: 1px solid #EBEBEB;
            /*cursor: pointer;*/
        }
        .content_ul li:first-child{
            border-top: 0;
        }
        .content_ul li:hover{
            background: #3389D4;
            color: #fff;
        }
        .content_ul li:after{
            content: '';
            width: 0;
            height: 0;
            clear: both;
        }
        .content_ul li span{
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
            width: 77%;
            vertical-align: text-bottom;
        }
        .more_more{
            font-family: SourceHanSansCN-Regular;
            font-size: 17px;
            color: #696969;
            cursor: pointer;
        }
        .more_more:hover{
            color: #3389D4;
        }

        .quick_access{
            margin-top: 30px;
            margin-bottom: 20px;
        }
        .quick_access:after{
            content: '';
            width: 0;
            height: 0;
            clear: both;
        }
        .quick_access div{
            float: left;
            margin-left: 33px;
            margin-bottom: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div v-cloak id="app_index">
    <el-row>
        <el-col class="quick_access">
            <div v-for="(item,index) in fastlist" v-show="item.show" @mouseenter="changeImg(item,index)" @mouseleave="recovery(item,index)">
                <a href="#" @click="addTab(item)">
                    <img :src="item.img" />
                </a>
            </div>
        </el-col>
    </el-row>
</div>
</body>
<script>
    var sy = new Vue({
        el: '#app_index',
        data(){
            return {
                fastlist: [
                    {
                        id: '',
                        text: '风险预警综合管理',
                        url: '',
                        img: '../images/sy/风险预警综合管理.png',
                        index: '',
                        show: false
                    },
                    {
                        id: '',
                        text: '风险预警认领',
                        url: '',
                        img: '../images/sy/风险预警认领.png',
                        index: '',
                        show: false
                    },
                    {
                        id: '',
                        text: '风险预警分发',
                        url: '',
                        img: '../images/sy/风险预警分发.png',
                        index: '',
                        show: false
                    },
                    {
                        id: '',
                        text: '风险预警回复',
                        url: '',
                        img: '../images/sy/风险预警回复.png',
                        index: '',
                        show: false
                    },
                    {
                        id: '',
                        text: '风险预警结束',
                        url: '',
                        img: '../images/sy/风险预警结束.png',
                        index: '',
                        show: false
                    }
                ],
                contentRequire: [],
                contentFinished: []
            }
        },
        mounted() {
            this.showFastBtn();
        },
        methods:{
            showFastBtn(){
                var menulist = JSON.parse(localStorage.getItem("menuList"));
                var fastlist = this.fastlist;
                // 遍历--匹配
                for (var i=0; i<fastlist.length; i++) {
                    var ftxt = fastlist[i].text;
                    for (var j=0; j<menulist.length; j++) {
                        if (ftxt == menulist[j].text) {
                            fastlist[i].show = true;
                            fastlist[i].id = menulist[j].id; // 添加id
                            fastlist[i].url = menulist[j].url; // 添加url
                            break;
                        }
                    }
                }
            },
            addTab(item){
                parent.vue.addTab(item);
            },
            // hover图片
            changeImg(item,index){
                if(index == 0){
                    item.img = '../images/sy/hover/风险预警综合管理.png';
                }else if(index == 1){
                    item.img = '../images/sy/hover/风险预警认领.png';
                }else if(index == 2){
                    item.img = '../images/sy/hover/风险预警分发.png';
                }else if(index == 3){
                    item.img = '../images/sy/hover/风险预警回复.png';
                }else if(index == 4){
                    item.img = '../images/sy/hover/风险预警结束.png';
                }
            },
            recovery(item,index){
                if(index == 0){
                    item.img = '../images/sy/风险预警综合管理.png';
                }else if(index == 1){
                    item.img = '../images/sy/风险预警认领.png';
                }else if(index == 2){
                    item.img = '../images/sy/风险预警分发.png';
                }else if(index == 3){
                    item.img = '../images/sy/风险预警回复.png';
                }else if(index == 4){
                    item.img = '../images/sy/风险预警结束.png';
                }
            }
        }
    })
</script>
</html>
